<template>
	<view>

		<view class="top" v-show="isCheck">
			<!-- <image src="../../static/dl.png" mode="" style="width: 100%; height: 100%; position: absolute;"></image> -->
			<view class="tu">
				<!-- <image src="../../static/dl1.png" mode="" style="width: 100%; position: absolute;"></image> -->
				<text
					style="font-size: 36rpx;  display: block; text-align: center; position: relative;top: 30rpx;margin-bottom: 77rpx;">项目查询</text>
				<input class="inp" type="number" placeholder="请输入手机号" maxlength=11 v-model="mobile" />
				<input class="inp" type="password" placeholder="请输入密码" v-model="password" />
				<button class="btn" @click="denglu()">查询</button>
			</view>
		</view>


		<!-- 个人信息 -->
		<view class="top1" v-show="ischeck1">
			<image src="../../static/bc3.png" style="width: 100%; height: 358rpx; position: fixed;" mode=""></image>
			<image src="../../static/tx.png"
				style="width: 113rpx; height: 114rpx; position: absolute;left: 30rpx; top: 140rpx; " mode=""></image>
			<text style="font-size: 36rpx;position: absolute; top: 157rpx; left: 170rpx; color: #fff;">{{userInfo.name}}</text>
			<text style="font-size: 24rpx;position: absolute; top: 210rpx; left: 170rpx; color: #fff;">{{userInfo.mobile}}</text>
			<image @click="dianji" src="../../static/qh1.png" mode=""
				style="width: 25rpx; height: 21rpx; position: absolute; right: 60rpx; top: 160rpx;"></image>
			<text @click="dianji"
				style="font-size: 24rpx; color: #fff; position: absolute; right: 30rpx; top: 195rpx;">切换账号</text>
		</view>

		<!-- 我的项目列表 -->
		<view class="bom" v-show='ischeck1'>
			<view style="margin-top:300rpx; font-size: 32rpx;" v-if="xm<=0">
				<image src="../../static/zanwu.png" mode="" style="width: 286rpx; height: 261rpx; margin-left: 240rpx;">
				</image>
				<u-empty text="~ 暂无数据 ~" mode=""></u-empty>
			</view>
			<view class="bom1" v-for="(item,index) in xm " @click="tz(item.id)" :key='index'>
				<image :src="item.image" style="width: 180rpx; height: 180rpx; float: left; margin: 13rpx 13rpx;"
					mode=""></image>
				<view style="width: 360rpx; height: 42rpx;  position: absolute;left: 220rpx; top: 10rpx;">
					<text style="font-size: 30rpx; overflow: hidden;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;">{{item.title}}</text>
				</view>

				<view style="width: 426rpx; height: 73rpx; position: absolute;left: 220rpx; top: 70rpx;">
					<text style="font-size: 26rpx;  color: #ccc; overflow: hidden;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;">{{item.desc}}</text>
				</view>


				<text
					style="font-size: 24rpx; position: absolute;right: 30rpx; top: 160rpx; color: #ccc;">{{timeFormat(item.createtime*1000,'second')}}</text>
				<block v-if="item.state==0">
					<image src="../../static/lan.png"
						style="width: 80rpx; height: 71rpx; position: absolute; right:0rpx ;" mode="">
					</image>
					<view class="text" style="width: 100rpx;position: absolute;top: 60rpx; right: 435rpx;">
						<text
							style="font-size:20rpx; color: #fff; position: absolute; right: -150rpx; top: -60rpx;">意向</text>
					</view>
				</block>
				<block v-if="item.state==1">
					<image src="../../static/zong.png"
						style="width: 80rpx; height: 71rpx; position: absolute; right:0rpx ;" mode="">
					</image>
					<view class="text" style="width: 100rpx;position: absolute;top: 60rpx; right: 435rpx;">
						<text
							style="font-size:20rpx; color: #fff; position: absolute; right: -150rpx; top: -60rpx;">跟踪</text>
					</view>
				</block>
				<block v-if="item.state==2">
					<image src="../../static/zong1.png"
						style="width: 80rpx; height: 71rpx; position: absolute; right:0rpx ;" mode="">
					</image>
					<view class="text" style="width: 100rpx;position: absolute;top: 60rpx; right: 435rpx;">
						<text
							style="font-size:20rpx; color: #fff; position: absolute; right: -150rpx; top: -60rpx;">成单</text>
					</view>
				</block>
				<block v-if="item.state==3">
					<image src="../../static/red.png"
						style="width: 80rpx; height: 71rpx; position: absolute; right:0rpx ;" mode="">
					</image>
					<view class="text" style="width: 100rpx;position: absolute;top: 60rpx; right: 435rpx;">
						<text
							style="font-size:20rpx; color: #fff; position: absolute; right: -150rpx; top: -60rpx;">首付</text>
					</view>
				</block>
				<block v-if="item.state==4">
					<image src="../../static/zi.png"
						style="width: 80rpx; height: 71rpx; position: absolute; right:0rpx ;" mode="">
					</image>
					<view class="text" style="width: 100rpx;position: absolute;top: 60rpx; right: 435rpx;">
						<text
							style="font-size:20rpx; color: #fff; position: absolute; right: -150rpx; top: -60rpx;">已回款</text>
					</view>
				</block>
				<block v-if="item.state==5">
					<image src="../../static/skyblue.png"
						style="width: 80rpx; height: 71rpx; position: absolute; right:0rpx ;" mode="">
					</image>
					<view class="text" style="width: 100rpx;position: absolute;top: 60rpx; right: 435rpx;">
						<text
							style="font-size:20rpx; color: #fff; position: absolute; right: -150rpx; top: -60rpx;">售后</text>
					</view>
				</block>
				<block v-if="item.state==6">
					<image src="../../static/lv.png"
						style="width: 80rpx; height: 71rpx; position: absolute; right:0rpx ;" mode="">
					</image>
					<view class="text" style="width: 100rpx;position: absolute;top: 60rpx; right: 435rpx;">
						<text
							style="font-size:20rpx; color: #fff; position: absolute; right: -150rpx; top: -60rpx;">完成</text>
					</view>
				</block>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		wdxm
	} from '@/api/api.js'
	export default {
		data() {
			return {
				id: "",
				xm: [], //我的项目列表
				mobile: '',
				password: '', //密码
				isCheck: true,
				ischeck1: false,
				text: '',
				img: '',
				page: 1,
				total: '',
				isLoading: false,
				userInfo:{}
			}
		},
		onLoad(options) {
			this.id = options.id
			console.log(options)
			// this.w_dxm()
			//分享微信好友
			if (this.$wechat && this.$wechat.isWechat()) {
				this.$wechat.share();
			}
			if (!uni.getStorageSync('mobile')) {
				this.isCheck = true;
				this.ischeck1 = false;

			} else {
				this.gg();
				this.gt();
			}
		},
		onReachBottom() {
			if (this.mobile && this.password && this.xm.length >= 10) {
				if (this.page * 10 >= this.total) {
					uni.showToast({
						title: '已加载全部数据',
						icon: 'none'
					})
					return
				}
				if (this.isLoading) return
				this.page++
				this.gt()
			}
		},
		methods: {
			dianji() {
				this.isCheck = true;
				this.ischeck1 = false;
			},

			// 登录   判断手机号
			denglu() {
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.mobile) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!reg.test(this.mobile)) { //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				} else if (!this.password) {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					return
				} else {
					uni.setStorageSync('mobile', this.mobile)
					uni.setStorageSync('password_my', this.password)
					this.page = 1
					this.xm = []
					// this.gg();
					this.gt(); //获取项目列表
				}
			},


			tz(id) {
				console.log(id)
				uni.navigateTo({
					url: `./my_dedtil?id=${id}` //跳转我的项目详情
				})
			},

			// w_dxm: function() {
			// 	wdxm({
			// 		mobile: this.mobile
			// 	}).then(res => {
			// 		console.log(res)
			// 		this.xm = res.data;
			// 	})
			// },

			//取出缓存手机号
			gg() {
				const mobile = uni.getStorageSync('mobile')
				const password = uni.getStorageSync('password_my')
				this.mobile = mobile
				this.password = password
			},

			//我的项目列表
			gt() {
				this.isLoading = true
				wdxm({
					mobile: this.mobile,
					page: this.page,
					page_size: 10,
					password: this.password
				}).then((res) => {
					if (res.code != 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
					this.isCheck = false,
						this.ischeck1 = true
					this.isLoading = false
					this.total = res.data.total
					this.userInfo=res.data.user_info
					this.xm.push(...res.data.data)
					this.getstatus();
				})
			},

			//格式化时间戳
			timeFormat(time, type, interval) {
				let int = interval || '-'
				var skr = new Date(time)
				let y = skr.getFullYear()
				let M = skr.getMonth() + 1
				if (M < 10) {
					M = '0' + M
				}
				let d = skr.getDate()
				if (d < 10) {
					d = '0' + d
				}

				if (type == 'day' || type == '') {
					return y + int + m + int + d
				}
				if (type == 'second') {
					return y + int + M + int + d
				}
			},
			getstatus() {
				if (this.xm[0].state == 0) {
					this.img = '../../static/lan.png';
					console.log(this.img)
					this.text = '意向';
					return
				}
				if (this.xm[0].state == 1) {
					this.img = '../../static/zong.png';
					this.text = '跟踪';
					return
				}
				if (this.xm[0].state == 2) {
					this.img = '../../static/zong1.png';
					this.text = '成单';
					return
				}
				if (this.xm[0].state == 3) {
					this.img = '../../static/red.png';
					this.text = '首付';
					return
				}
				if (this.xm[0].state == 4) {
					this.img = '../../static/zi.png';
					this.text = '已回款';
					return
				}
				if (this.xm[0].state == 5) {
					this.img = '../../static/skyblue.png';
					this.text = '售后';
					return
				}
				if (this.xm[0].state == 6) {
					this.img = '../../static/lv.png';
					this.text = '完成';
					return
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.top {
		background: url('../../static/dl.png') no-repeat;
		background-size: 100% 100%;
		width: 100%;height: 100vh;
		// height: 1445rpx;
		background-color: #007AFF;

		.tu {
			background: url('../../static/dl1.png') no-repeat;
			background-size: 100% 100%;
			width: 705rpx;
			height: 500rpx;
			position: absolute;top: 500rpx;left: 24rpx;
			// margin: 660rpx 24rpx 0;
		}
	}

	.inp {
		width: 616rpx;
		height: 68rpx;
		margin: 0 30rpx;
		// position: absolute;
		padding-left: 30rpx;
		background-color: #E8E8E8;
		margin-bottom: 20px;
	}

	.btn {
		width: 645rpx;
		height: 68rpx;
		background-color: #4575FC;
		margin: 0rpx 30rpx;
		position: absolute;
		padding-left: 30rpx;
		color: #fff;
		line-height: 68rpx;

	}



	.top1 {
		position: fixed;top: 0;z-index: 11;
		width: 100%;
		height: 358rpx;
	}

	.bom {
		width: 100%;padding-top: 365rpx;
		// height: 1046rpx;
		background-color: #fff;
		// float: left;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding-bottom: 100rpx;

		.bom1 {
			width: 686rpx;
			height: 205rpx;
			margin: 20rpx auto;
			position: relative;
			// left: 20rpx;
			// top: 12rpx;
			background-color: #FFF;
			border-radius: 15rpx 15rpx;
			box-shadow: #ccc 0rpx 0rpx 10rpx;

			.text {
				float: right;
				margin: -128rpx -300rpx;
				transform: rotate(45deg);
			}
		}
	}

	.hhh {
		background-color: #4CD964;
	}
</style>
